<template>
  <view class="content">
    <view class="content-header">
      <image src="https://small.qaqavr.com/img/zhongrui/bg.png" mode=""></image>
      <view class="tabswtich">
        <view class="switch-box" :class="{ active: changeNum == 0 }" @click="changeNum = 0">内部推荐</view>
        <view class="switch-box" :class="{ active: changeNum == 1 }" @click="changeNum = 1">外部推荐</view>
        <view class="switch-box" :class="{ active: changeNum == 2 }" @click="changeNum = 2">校招推荐</view>
      </view>
    </view>

    <view class="mydata">
      <view style="width: 100%; height: 40rpx; font-size: 26rpx; display: flex;align-items: center;">
        <view style="display: inline-block;width: 10rpx;height: 100%;margin-right: 20rpx;">
          <image src="https://small.qaqavr.com/img/zhongrui/rectangle.png" style="width: 100%; height: 100%;" mode=""></image>
        </view>
        推荐人
      </view>
      <u--form labelWidth="100px" labelPosition="top" :model="form" ref="form1">
        <u-form-item label="姓名" borderBottom><u--input v-model="form.jobSeekerByRecommendedDto.realName" placeholder="请输入姓名" border="none"></u--input></u-form-item>

        <u-form-item label="电话" borderBottom>
          <u--input v-model="form.jobSeekerByRecommendedDto.telPhone" placeholder="请输入电话" type="number" border="none" trim maxlength="11"></u--input>
        </u-form-item>

        <u-form-item v-if="changeNum === 0" label="工号" borderBottom>
          <u--input
            v-model="form.jobSeekerByRecommendedDto.workNum"
            placeholder="请输入工号"
            disabled
            disabledColor="#ffffff"
            type="idcard"
            border="none"
            trim
            maxlength="18"
          ></u--input>
        </u-form-item>
        <u-form-item v-else="changeNum === 1" label="身份证号" borderBottom>
          <u--input v-model="form.jobSeekerByRecommendedDto.idCard" placeholder="请输入身份证号" type="idcard" border="none" trim maxlength="18"></u--input>
        </u-form-item>
        <u-form-item v-else label="身份证号" borderBottom>
          <u--input v-model="form.jobSeekerByRecommendedDto.idCard" placeholder="请输入身份证号" type="idcard" border="none" trim maxlength="18"></u--input>
        </u-form-item>
      </u--form>
    </view>

    <view class="mydata1">
      <view style="width: 100%; height: 40rpx; font-size: 26rpx; display: flex;align-items: center;">
        <view style="display: inline-block;width: 10rpx;height: 100%;margin-right: 20rpx;">
          <image src="https://small.qaqavr.com/img/zhongrui/rectangle.png" style="width: 100%; height: 100%;" mode=""></image>
        </view>
        被推荐人
      </view>
      <u--form labelWidth="100px" labelPosition="top" :model="form" ref="form1">
        <u-form-item label="姓名" borderBottom><u--input v-model="form.realName" placeholder="请输入姓名" border="none"></u--input></u-form-item>

        <u-form-item label="电话" borderBottom><u--input v-model="form.telPhone" placeholder="请输入电话" type="number" border="none" trim maxlength="11"></u--input></u-form-item>

        <u-form-item label="身份证号" borderBottom>
          <u--input v-model="form.idCard" placeholder="请输入身份证号" type="idcard" border="none" trim maxlength="18"></u--input>
        </u-form-item>
        <u-form-item label="面试日期" borderBottom @click="showDate = true">
          <u--input v-model="form.interviewTime" placeholder="请选择面试日期" disabled disabledColor="#ffffff" border="none"></u--input>
          <u-icon slot="right" name="arrow-right"></u-icon>
        </u-form-item>

        <u-form-item label="岗位类别" borderBottom @click="category = true" ref="item1">
          <u--input v-model="form.jobTypeName" placeholder="请选择岗位类别" disabledColor="#ffffff" border="none" disabled></u--input>
          <u-icon slot="right" name="arrow-right"></u-icon>
        </u-form-item>

        <u-form-item label="岗位编号" borderBottom @click="showCode = true" ref="item">
          <u--input v-model="form.myjobNum" disabledColor="#ffffff" placeholder="请选择岗位编号" border="none" disabled></u--input>
          <u-icon slot="right" name="arrow-right"></u-icon>
        </u-form-item>

        <u-form-item label="毕业时间" v-if="changeNum === 2" borderBottom @click="showBiye = true" ref="item1">
          <u--input v-model="form.graduationTime" disabled disabledColor="#ffffff" placeholder="请选择毕业日期" border="none"></u--input>
          <u-icon slot="right" name="arrow-right"></u-icon>
        </u-form-item>

        <u-form-item label="学历信息" v-if="changeNum === 2" borderBottom>
          <view v-show="form.schoolProveUrl == ''" class="uli" @click="chooseImage">
            <view class="uli" v-show="form.schoolProveUrl !== ''" v-for="(item, index) in urls" :key="index">
              <view class="miniBox" @click="form.schoolProveUrl = ''">X</view>
              <image mode="aspectFill" :src="item"></image>
            </view>
          </view>
          <view class="headerPho" v-show="form.schoolProveUrl !== ''">
            <view class="miniBox" @click="form.schoolProveUrl = ''">X</view>
            <image :src="form.schoolProveUrl" mode="" @click="clickImg"></image>
          </view>
        </u-form-item>
      </u--form>

      <view class="fotter-button" @click="submit">提交</view>
    </view>

    <!-- 日期弹框 -->
    <u-datetime-picker :show="showDate" :value="dataTime" mode="date" closeOnClickOverly @confirm="dateConfirm" @cancel="dateClose" @close="dateClose"></u-datetime-picker>
    <!-- 岗位弹框 -->
    <u-action-sheet :show="category" :actions="actions" title="请选择" @close="category = false" @select="categorySelect"></u-action-sheet>
    <!-- 岗位编号 -->
    <u-action-sheet
      style="height: 500px !important; overflow: auto !important;"
      :show="showCode"
      :actions="actionsList"
      safeAreaInsetBottom
      title="请选择"
      @close="showCode = false"
      @select="codeSelect"
    ></u-action-sheet>
    <!-- 毕业时间 -->
    <u-datetime-picker
      :show="showBiye"
      :value="biyeTime"
      mode="date"
      closeOnClickOverly
      @confirm="dateBiyechange"
      @cancel="dateBiyeClose"
      @close="dateBiyeClose"
    ></u-datetime-picker>
    
    <!-- 弹框 -->
    <view v-if="show" class="message">
      <view class="headermessage">
        <image src="https://small.qaqavr.com/img/zhongrui/tankuang.png" style="width: 180rpx; height: 150rpx;" mode=""></image>
      </view>
      <view style="width: 100%; text-align: center;font-size: 28rpx;">
        资料提交成功
      </view>
      <view style="width: 100%; text-align: center;font-size: 22rpx; color: #999999;">
        资料信息已保存至个人中心
      </view>
      
      <view class="know" @click="getchange">
        我知道了
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      changeNum: 0, //tab切换的默认值
      showDate: false,
      show:false,
      dataTime: Number(new Date()),
      biyeTime: Number(new Date()),
      category: false, //控制岗位类别
      showCode: false, //控制岗位编号
      showBiye: false, //控制毕业时间
      // id : 1,
      // num:2,
      form: {
        graduationTime: '', //毕业时间
        idCard: '', //身份证
        interviewTime: '', //面试时间
        isUpdate: null, //是否更新用户信息  1是 0否
        jobNum: '', //面试职位代号
        jobTypeId: null, //面试职位类型ID
        realName: '', //名字
        recruitmentType: 1, // 1社招 2校招
        schoolProveUrl: '', //学历证明图片地址
        signUpType: null, // 1内部推荐 2外部推荐
        telPhone: '', //电话
        // 用户信息
        jobSeekerByRecommendedDto: {
          avatarUrl: '',
          graduationTime: '',
          idCard: '',
          openId: '',
          realName: '',
          schoolProveUrl: '',
          telPhone: '',
          workNum: ''
        }
      },
      userList: {}, //用户的基本信息
      position: [], //岗位信息
      actions: [],
      actionsList: [] //岗位编号
    };
  },
  onLoad() {
    this.userList = uni.getStorageSync('userinfo');
  },
  onShow() {
    this.updateuserlist();
    this.getposition();
  },
  methods: {
    updateuserlist() {
      this.form.jobSeekerByRecommendedDto.realName = this.userList.realName;
      this.form.jobSeekerByRecommendedDto.graduationTime = this.userList.graduationTime;
      this.form.jobSeekerByRecommendedDto.avatarUrl = this.userList.avatarUrl;
      this.form.jobSeekerByRecommendedDto.telPhone = this.userList.telPhone;
      this.form.jobSeekerByRecommendedDto.idCard = this.userList.idCard;
      this.form.jobSeekerByRecommendedDto.schoolProveUrl = this.userList.schoolProveUrl;
      this.form.jobSeekerByRecommendedDto.workNum = this.userList.workNum;
      this.form.jobSeekerByRecommendedDto.openId = this.userList.openId;
    },
    // 选择面试日期
    dateConfirm(e) {
      this.showDate = false;
      this.form.interviewTime = uni.$u.timeFormat(e.value, 'yyyy-mm-dd');
    },

    // 关闭面试日期
    dateClose() {
      this.showBirthday = false;
    },
    dateBiyeClose() {
      this.showBiye = false;
    },
    dateBiyechange(e) {
      this.showBiye = false;
      this.form.graduationTime = uni.$u.timeFormat(e.value, 'yyyy-mm-dd');
    },

    // 获取岗位
    async getposition() {
      const { data } = await uni.$http.get('/jobType/findAll');
      if (data.statusCode !== 200) {
        return;
      } else {
        this.position = data.data;
        console.log('gggggg', this.position);
        const arr = [];
        for (var i = 0; i < this.position.length; i++) {
          arr.push({
            name: this.position[i].typeName,
            id: this.position[i].id,
            keyWord: this.position[i].keyWord
          });
        }
        this.actions = arr;
        console.log('88888888888', this.actions);
      }
    },
    async categorySelect(e) {
      console.log('9999999999999999999', e);
      this.form.myjobNum = '';
      this.form.jobTypeName = e.name;
      this.form.jobTypeId = e.id;
      this.$refs.form1.validateField('gangwei');
      const { data } = await uni.$http.get('/job/findJobNumByTypeId?id=' + e.id);

      if (data.statusCode !== 200) {
        return;
      } else {
        const obj = data.data;
        const arr = [];
        console.log('我是obj', obj);
        for (var i = 0; i < obj.length; i++) {
          console.log('iiiii', obj[i]);
          arr.push({
            name: e.keyWord + obj[i]
          });
        }
        this.actionsList = arr;
      }
    },
    codeSelect(e) {
      console.log('eeeeeeeeeeeeeee', e);
      this.form.jobNum = e.name;
      this.form.myjobNum = e.name;
    },
    chooseImage() {
      var that = this;
      uni.chooseImage({
        count: 1,
        sizeType: ['original', 'compressed'], //original 原图，compressed 压缩图
        sourceType: ['album', 'camera'], //album 从相册选图，camera 使用相机
        success: function(res) {
          console.log('我是res', JSON.stringify(res.tempFilePaths));
          const tempFilePaths = res.tempFilePaths;
          console.log('tempFilePaths', tempFilePaths);
          that.urls = tempFilePaths;
          uni.uploadFile({
            url: uni.$http.baseUrl + '/upload/uploadPic',
            filePath: that.urls[0],
            header: {
              token: uni.getStorageSync('tokenValue')
            },
            name: 'file',
            success(uploadFileRes) {
              // console.log('uploadFileRes.data===>' , JSON.parse(uploadFileRes.data));
              const photores = JSON.parse(uploadFileRes.data);
              console.log('uploadFileRes.data===>', photores);
              if (photores.statusCode !== 200) {
                return;
              } else {
                that.form.schoolProveUrl = photores.data;
              }

              console.log('wowowowwo', that.form);
            }
          });
        }
      });
    },

panduan(val){
  if (val == 1) {
    var userinfo = uni.getStorageSync('userinfo');
    if (!userinfo.idCard) {
      uni.showToast({
        title: '请完善个人中心身份证信息',
        icon: 'none'
      });
      return;
    }
    if (!userinfo.workNum) {
      uni.showToast({
        title: '您当前不允许内部推荐',
        icon: 'none'
      });
      return;
    }
  }
},

tijiao(obj){
  uni.request({
    url: uni.$http.baseUrl + '/sign/signUpAddByRecommended',
    method: 'POST',
    data: obj,
    header: {
      token: uni.getStorageSync('tokenValue')
    },
    success(res) {
      console.log('提交提交', res.data);
      if (res.data.statusCode !== 200) {
        uni.showToast({
          title: res.data.message,
          icon: 'none'
        });
      } else {
        uni.showToast({
          title: res.data.message,
          icon: 'success'
        });
        setTimeout(function() {
        	 uni.navigateBack();
        }, 700);
      }
    }
  });
},
// 更新用户信息并提交
    async getchange() {
      this.show = false;
      this.form.isUpdate = 1;
      const res = await uni.$http.post('/sign/signUpAddByRecommended', this.form);
      console.log('提交提交', this.form);
      console.log('res9999', res);
      console.log('提交提交', res.data);
      if (res.data.statusCode !== 200) {
        uni.showToast({
          title: res.data.message,
          icon: 'none'
        });
      } else {
        uni.setStorageSync('userinfo', this.form.jobSeekerByRecommendedDto);
        // uni.navigateBack()
        uni.showToast({
          title: res.data.message,
          icon: 'success'
        });
        setTimeout(function() {
          uni.navigateBack();
        }, 700);
      }
    },
    submit() {
       this.form.jobNum = this.form.jobNum.replace(/\D/g, '');
      console.log('form', this.form);
      if (this.changeNum === 0) {
        this.form.signUpType = 1;
    
        this.panduan(this.form.signUpType)
        const Obj = {
          avatarUrl: this.userList.avatarUrl,
          graduationTime: this.userList.graduationTime,
          idCard: this.userList.idCard,
          openId: this.userList.openId,
          realName: this.userList.realName,
          schoolProveUrl: this.userList.schoolProveUrl,
          telPhone: this.userList.telPhone,
          workNum: this.userList.workNum
        };
        if(JSON.stringify(this.form.jobSeekerByRecommendedDto) === JSON.stringify(Obj)) {
           this.form.isUpdate = 0;
           this.tijiao(this.form)
        }else{
          this.show = true
        }
      } else if(this.changeNum === 1){
        this.form.signUpType = 2;
        this.panduan(this.form.signUpType)
        const Obj = {
          avatarUrl: this.userList.avatarUrl,
          graduationTime: this.userList.graduationTime,
          idCard: this.userList.idCard,
          openId: this.userList.openId,
          realName: this.userList.realName,
          schoolProveUrl: this.userList.schoolProveUrl,
          telPhone: this.userList.telPhone,
          workNum: this.userList.workNum
        };
        if(JSON.stringify(this.form.jobSeekerByRecommendedDto) === JSON.stringify(Obj)) {
           this.form.isUpdate = 0;
           this.tijiao(this.form)
        }else{
          this.show = true
        }
      }else{
        this.form.signUpType = 2
        this.form.recruitmentType = 2 
        const Obj = {
          avatarUrl: this.userList.avatarUrl,
          graduationTime: this.userList.graduationTime,
          idCard: this.userList.idCard,
          openId: this.userList.openId,
          realName: this.userList.realName,
          schoolProveUrl: this.userList.schoolProveUrl,
          telPhone: this.userList.telPhone,
          workNum: this.userList.workNum
        };
        if(JSON.stringify(this.form.jobSeekerByRecommendedDto) === JSON.stringify(Obj)) {
           this.form.isUpdate = 0;
           this.tijiao(this.form)
        }else{
          this.show = true
        }
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.content {
  position: relative;
  // height: 100%;
  background-color: #f7f7f7;
  .content-header {
    position: relative;
    height: 400rpx;

    image {
      width: 100%;
      height: 350rpx;
    }
    .tabswtich {
      position: absolute;
      display: flex;
      justify-content: space-between;
      align-items: center;
      top: 20rpx;
      left: 50%;
      border-radius: 25rpx;
      transform: translateX(-50%);
      width: 60%;
      height: 50rpx;
      background-color: #aaa8a8;
      .switch-box {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 28rpx;
        width: 33%;
        height: 100%;
        border-radius: 25rpx;
      }
    }
  }
  // 动态类名
  .active {
    background-color: #ffffff;
    color: #0075fe;
  }

  .mydata {
    position: absolute;
    top: 100rpx;
    left: 50%;
    border-radius: 20rpx;
    transform: translateX(-50%);
    width: 80%;
    padding: 20rpx;
    // height: 300rpx;
    background-color: #ffffff;
  }
  .mydata1 {
    position: absolute;
    top: 580rpx;
    left: 50%;
    border-radius: 20rpx;
    transform: translateX(-50%);
    width: 80%;
    padding: 20rpx;
    // height: 300rpx;
    background-color: #ffffff;
  }

  /deep/.u-form-item__body__left__content__label.data-v-5e7216f1 {
    font-size: 30rpx;
    font-weight: bold;
  }
  /deep/.u-input__content__field.data-v-fdbb9fe6 {
    font-size: 26rpx !important;
  }
  .fotter-button {
    position: absolute;
    left: 50%;
    margin-top: 50rpx;
    margin-bottom: 50rpx;
    transform: translateX(-50%);
    width: 230rpx;
    height: 70rpx;
    border-radius: 35rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    background-color: #2589ff;
  }
  .headerPho {
    position: relative;
    width: 100rpx;
    height: 100rpx;
    .miniBox {
      position: absolute;
      top: -5px;
      right: -5px;
      width: 30rpx;
      height: 30rpx;
      font-size: 18rpx;
      text-align: center;
      line-height: 30rpx;
      color: #ffffff;
      background-color: #373737;
      border-radius: 50%;
    }
    image {
      width: 100%;
      height: 100%;
    }
  }
  .message{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 300rpx;
    border-radius: 35rpx;
    height: 350rpx;
    box-shadow: 0 0 5rpx #ccc;
    background-color: #FFFFFF;
    .headermessage{
     margin: auto;
      width: 150rpx;
      height: 150rpx;
      border-radius: 50%;
    }
    .know{
      transform: translateX(50%);
      width: 150rpx;
      height: 60rpx;
      margin-top: 50rpx;
      border-radius: 40rpx;
      background-color: #2589ff;
      font-size: 24rpx;
    
      color: #FFFFFF;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  .uli {
    position: relative;
    width: 100rpx;
    height: 100rpx;
    background: url(https://small.qaqavr.com/img/zhongrui/upload.png) no-repeat;
    background-size: contain;
    .miniBox {
      position: absolute;
      top: -5px;
      right: -5px;
      width: 30rpx;
      height: 30rpx;
      font-size: 18rpx;
      text-align: center;
      line-height: 30rpx;
      color: #ffffff;
      background-color: #373737;
      border-radius: 50%;
    }
    image {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
